<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 指令: v-for 展现的标签 -->
			<!-- 案例1: 以循环方式输出爱好 -->
			<div id="demo1">
				<!-- 如果只有一个参数,则value表示数据 -->
				<p v-for="value in hobby" v-text="value"></p>
			</div>
			<hr />
			
			<!-- 案例2: 以循环方式输出爱好 展现下标
				 arg1: value的值的数据
				 arg2: 下标的数据.
			 -->
			<div id="demo2">
				<p v-for="arg1,arg2 in hobby">
					<span v-text="arg2+1"></span>
					----
					<span v-text="arg1"></span>
				</p>
			</div>
			<hr />
			
			<div id="demo3">
				<table border="1px" width="90%">
					<tr align="center">
						<td>编号</td>
						<td>名称</td>
						<td>年龄</td>
					</tr>
					<!-- 遍历数据获取对象,之后从对象中获取属性 -->
					<tr align="center" v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
					</tr>
				</table>
			</div>
			<hr />
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					hobby: ["敲代码","改BUG","钻研技术"],
					userList: [{id:100,name:"泰森",age:60},
							   {id:101,name:"嘴炮",age:40},
							   {id:102,name:"泰坦巨猿",age:300000},
							  ]
				},
				methods: {
				}
			})
		</script>
	</body>
</html>
